<template>
	<view style="height: 100vh; background-color: #F8F8F8;">
		<view class="dingpei">
			<view @click="changpao()">
				长跑路线
			</view>
			<view @click="shouye()">
				货源大厅
				
			</view>
			<view>
				专属货源
				<view style="border-bottom:  6rpx solid #002FAF;width: 35rpx;margin: 7rpx auto;" />
			</view>
		</view>
		<view class="ssuoz" v-if="ssuo">
			<input type="text" placeholder="请输入查询的地址" v-model="ssuoss" 
				style="height: 60rpx; padding-left: 30rpx;border-radius: 50rpx; border: 1px solid #8F8E8F;margin: 5rpx 10rpx;" >
				</input>
				<view class="ssann" @click="shousuo(ssuoss)">
					
				</view>
		</view>
		<view class="waiwei">
			<view class="daohanglan">
				<view class="zhuang">装:</view>
				<view class="zhuang">卸:</view>
				<view class="pai">
					<view class="pai">
						<!-- 选中之后的数据展示 -->
						<view class="inputPlaceholder" v-if='value' @tap="changejiantou">
							<text style="color:black;">{{ value }}</text>
							<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
							<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
						</view>
						<!-- 未选择时的Placeholder展示 -->
						<view class="inputPlaceholder" v-else @tap="changejiantou">
							<text>请选择司机类别</text>
							<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
							<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
						</view>
						<!-- 下拉展开后的可选择内容 -->
						<view class="content" v-if='!isjiantou'>
							<view :class="item.id === valueid ? 'active' : ''" v-for="item in selectcontent"
								:key="item.id" @tap="changecontent" :data-datavalue="item">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>

				<view @click="suos()">
					<image src="@/photo/zhaohuo/搜索.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="xinxi" v-if="shuju" >
				<view class="xunh" v-for="time in shuju" @click="tzhuan(time)">
					<view class="yaodong">
						<view class="zuo">
							<image src="/photo/zhaohuo/diandian.png" mode=""
								style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
						</view>
						<view class="you">
							<view style="font-size: 28rpx;height: 70rpx;">
								{{time.shippingaddress.stationName}} - {{time.shippingaddress.stationAddress}}
							</view>
							<view style="font-size: 28rpx;height: 70rpx;">
								{{time.unloadingaddress.stationName}} - {{time.unloadingaddress.stationAddress}}
							</view>
						</view>
					</view>
					<view class="yuan">
						<image src="@/photo/zhaohuo/naoz.png" style="width: 27rpx;height: 27rpx;" mode=""></image>
						原煤{{time.totalweight}} 剩余{{time.totalweights}}吨
					</view>
					<view class="yun">
						运价<span class="jia">{{time.unitprice}}元/吨</span>预估收入<span class="jia">{{time.yprice}}元</span>
					</view>
				</view>
			</view>
			<view class="meiyou">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		http
	} from '../../config/requst';
	import {
		userStore
	} from '@/stores/user';
	import {
		shopStore
	} from '@/stores/shop.js';
	const shuju = (ref([]))
	const user = userStore()
	const ssuoss =ref('')
	const tzhuan = (obj) => {
		shopStore().setShop(obj)
		uni.navigateTo({
			url: '/pages/deal/deal'
		})
	}
	//搜索
	const ssuo = ref(false)
	const suos = () => {
		if (ssuo.value) {
			ssuo.value = false
		} else {
			ssuo.value = true
		}
	}
	const changpao = () => {
		uni.redirectTo({
			url: '/pages/Frequently/Frequently'
		})
	}
	const shouye = () => {
		uni.switchTab({
			url: '/pages/Search/Search'
		})
	}
	//下拉列表的js 
	const isjiantou = ref(true);
	const selectcontent = ref([{
			id: 1,
			name: "智能排序"
		},
		{
			id: 2,
			name: "离我最近"
		},
		{
			id: 3,
			name: "运价最高"
		},
		{
			id: 4,
			name: "运价最短"
		},
	]);
	const value = ref("智能排序");
	const valueid = ref(1);

	// 下拉框收起和下拉 
	const changejiantou = () => {
		isjiantou.value = !isjiantou.value;
	};

	const changecontent = (e) => {
		const datavalue = e.currentTarget.dataset.datavalue;
		value.value = datavalue.name;
		valueid.value = datavalue.id;
		isjiantou.value = true;
	};
	//连接后端读取数据
	const guazai2 = async (id) => {
		console.log(11112121)
		const czhao = await http({
			url: "/freightsources/zhuanshu/"+id,
			method: 'GET',
		})
		console.log(czhao)
		if (czhao.code == 20041) {
			console.log(11111)
			shuju.value = czhao.shuju
			console.log(czhao.shuju)
			console.log(shuju.value)
		}
	}
	onMounted(() => {
		console.log(11221)
		console.log(user.user.id)
		guazai(user.user.id)
	});
	const ssaas = async (name)=>{
		console.log(2121)
		const shousuo = await http({
			url:"/freightsources/sousuoaa/"+name,
			method:"Get"
		})
		console.log(shousuo)
		if(shousuo.code==20041){
			shuju.value = shousuo.shuju
			console.log(shuju)
		}
	}
	const shousuo =(aa)=>{
		console.log(aa)
		ssaas(aa)
	}
</script>

<style scoped>
	.dingpei {
		display: flex;
		justify-content: space-around;
		color: #002FAF;
	}

	.meiyou {
		margin-top: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #000; */
		text-align: center;
	}

	.daohanglan {
		padding-left: 30rpx;
		padding-right: 70rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #000; */
		display: flex;
		justify-content: space-between;
	}

	.zhuang {
		width: 80rpx;
		background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 38rpx 25rpx;
	}

	.pai {
		width: 160rpx;
		/* background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 120rpx 25rpx; */
		position: relative;
	}

	.xunh {
		background-color: #FFFFFF;
		padding-left: 30rpx;
		margin-top: 50rpx;
	}

	.yaodong {
		display: flex;
		padding-top: 20rpx;
	}

	.zuo {
		/* border: 1px solid #000; */
		display: flex;
		justify-content: center;
	}

	.you {
		/* border: 1px solid #000; */
	}

	.yuan {
		color: #ABADAB;
		font-size: 28rpx;
	}

	.yun {
		/* border: 1px solid #000; */
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
	}

	.jia {
		color: #F60117;
		font-size: 42rpx;
	}

	/* 下拉列表的js */
	.inputPlaceholder {
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		/* border: 1px solid #DEDEDE; */
		/* padding: 8rpx 40rpx 8rpx 20rpx; */
		margin-left: 16rpx;
		color: #CBCBCB;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		background-image: url('/photo/zhaohuo/xiala.png');
		background-repeat: no-repeat;
		background-position: 125rpx 23rpx;

	}

	.jiantou1 {
		position: absolute;
		right: 10rpx;
		top: 8rpx;
	}

	.content {
		/* border: 1px solid #000; */
		width: 160rpx;
		max-height: 400rpx;
		/* position: absolute; 
	 top: 120rpx; 
	 left: 389rpx; */
		background: #FFFFFF;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);
		padding: 20rpx;
		overflow-x: hidden;
		overflow-y: scroll;
		z-index: 1000;
	}

	.content>view {
		padding: 10rpx 0;

	}

	.active {
		color: #56D88A;
	}
	.ssuoz{
		position: relative;
	}
	.ssann{
		/* border: 1px solid #000; */
		width: 40rpx;
		height: 40rpx;
		background-image: url('/photo/zhaohuo/搜索.png');
		background-repeat: no-repeat;
		background-size: 35rpx;
		position: absolute;
		top: 12rpx;
		right: 30rpx;
	}
</style>